<template>
	<div>
		<div>
			<el-row>
				<el-button type="primary" size="mini" round><i class="el-icon-circle-plus-outline"></i> 新增</el-button>
				<el-button type="success" size="mini" round><i class="el-icon-finished"></i> 修改</el-button>
				<el-button type="danger" size="mini" round><i class="el-icon-delete"></i> 删除</el-button>
				<el-button type="primary" size="mini" round><i class="el-icon-printer"></i> 打印</el-button>
			</el-row>
		</div>
		<hr />
		<div>
			<el-form ref="form" :model="form" label-width="80px" size="small">
				<el-row :gutter="20">
					<el-col :span="5">
						<el-form-item prop="theme" label="主题:">
							<el-input v-model="form.theme"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="5">
						<el-form-item prop="inquiryner" label="询价员:">
							<el-input v-model="form.inquiryner"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="5">
						<el-form-item prop="supplier" label="供应商:">
							<el-input v-model="form.supplier"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="5">
						<el-form-item prop="state" label="审批状态">
							<el-select v-model="form.state" clearable >
								<el-option v-for="item in spState" :key="item.value" :label="item.label" :value="item.value">
								</el-option>
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :span="4">
						<el-button type="primary" size="small" >查询</el-button>
					</el-col>
				</el-row>
			</el-form>
		</div>
		<h2>采购询价列表</h2>
		<div class="inquirylist-main">
			<el-table size="mini" :data="inqlist" height="400" border style="width:100%" @selection-change="handleSelectionChange">
				<el-table-column fixed type="selection" width="55"></el-table-column>
				<el-table-column align="center" width="80" type="index" label="序号"></el-table-column>
				<el-table-column align="center" width="120" prop="id" label="单据编号"></el-table-column>
				<el-table-column align="center" width="150" prop="theme" label="主题"></el-table-column>
				<el-table-column align="center" width="120" prop="supplier" label="供应商"></el-table-column>
				<el-table-column align="center" width="120" prop="inquiryner" label="询价员"></el-table-column>
				<el-table-column align="center" width="120" prop="purtype" label="采购类别"></el-table-column>
				<el-table-column align="center" width="140" prop="inquirydata" label="询价日期"></el-table-column>
				<el-table-column align="center" width="120" prop="state" label="状态"></el-table-column>
			</el-table>
		</div>
		<div class="block">
			<el-pagination
			  @size-change="handleSizeChange"
			  @current-change="handleCurrentChange"
			  :current-page="currentPage"
			  :page-sizes="[10, 20, 30, 50]"
			  :page-size="10"
			  layout="total, sizes, prev, pager, next, jumper"
			  :total="100">
			</el-pagination>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return{
				form:{
					theme:'',
					inquiryner:'',
					supplier:'',
					state:''
				},
				spState: [{
					value: '1',
					label: '全部',
				}, {
					value: '2',
					label: '未提交',
				}, {
					value: '3',
					label: '待审批'
				}, {
					value: '4',
					label: '已审批'
				}],
				inqlist:[{
					id:'',
					theme:'',
					supplier:'',
					inquiryner:'',
					purtype:'',
					inquirydata:'',
					state:''
				}],
				currentPage: 1
			}
		},
		methods:{
			handleSelectionChange(val) {
				this.multipleSelection = val;
			},
			handleSizeChange(val) {
				console.log(`每页 ${val} 条`);
			},
			handleCurrentChange(val) {
				console.log(`当前页: ${val}`);
			}
		}
	}
</script>

<style>
	.inquirylist-main{
		border: 2px solid gainsboro;
		padding-top: 15px;
		padding-left: 20px;
		padding-right: 20px;
	}
</style>
